{% extends 'template.html' %}

{% block content %}
    <style>
        .container-fluid {
            position: relative;
            top: 41px;
        }

        .panel {
            cursor: pointer;
        }

        .panel:hover {
            box-shadow: 0px 0px 13px 5px rgba(14, 25, 80, .2);
        }

        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 0;


        }

        .modal-content {
            width: 500px;
        }

    </style>
    <div class="container-fluid">
        {% csrf_token %}
        <div class="row">
            <div class="col-md-1">
                <div class="panel panel-warning panel_list" id="author">
                    <div class="panel-heading author_list">作者</div>
                </div>
                <div class="panel panel-success panel_list" id="publish">
                    <div class="panel-heading">出版社</div>
                </div>
                <div class="panel panel-danger panel_list" id="books">
                    <div class="panel-heading">书籍</div>
                </div>

            </div>
            <div class="col-md-1">
                <div class="bs-example">
                    <div class=" panel  panel-heading" data-toggle="modal" data-target="#exampleModal"
                         data-whatever="@mdo" style="background: #FFDAB9">添加作者
                    </div>
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                         aria-labelledby="exampleModalLabel" style="display: none;">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">×</span></button>
                                    <h4 class="modal-title" id="exampleModalLabel">添加作者</h4>
                                </div>
                                <div class="modal-body">
                                    <form>
                                        <div class="form-group author_name">
                                            <label for="recipient-name" class="control-label">作者名</label>
                                            <input type="text" class="form-control" id="recipient-name">
                                        </div>

                                        <div class="form-group">
                                            <label for="recipient-name" class="control-label">年龄</label>
                                            <input type="text" class="form-control" id="recipient-age">
                                        </div>

                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" id="author_add">保存</button>
                                </div>
                            </div>
                        </div>
                    </div><!-- /.modal -->
                </div>
                <div class="bs-example">
                    <div class=" panel  panel-heading" data-toggle="modal" data-target="#myModal1"
                         data-whatever="@mdo" style="background: #BCD2EE">添加出版社
                    </div>
                    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog"
                         aria-labelledby="exampleModalLabel" style="display: none;">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">×</span></button>
                                    <h4 class="modal-title" id="exampleModalLabel">添加出版社</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="publish_form">
                                        <div class="form-group author_name">
                                            <label for="recipient-name" class="control-label">社名</label>
                                            <input type="text" class="form-control" id="publish_name" lable="社名">
                                        </div>

                                        <div class="form-group">
                                            <label for="recipient-name" class="control-label">城市</label>
                                            <input type="text" class="form-control" id="city_name" lable="城市">
                                        </div>
                                        <div class="form-group">
                                            <label for="recipient-name" class="control-label">邮箱</label>
                                            <input type="text" class="form-control" id="email_name" lable="邮箱">
                                        </div>


                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" id="publish_add">保存</button>
                                </div>
                            </div>
                        </div>
                    </div><!-- /.modal -->
                </div>
                <div class="bs-example">
                    <div class=" panel  panel-heading s_books" data-toggle="modal" data-target="#myModal2"
                         data-whatever="@mdo" style="background: #B0E0E6">添加书籍
                    </div>
                    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog"
                         aria-labelledby="exampleModalLabel" style="display: none;">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">×</span></button>
                                    <h4 class="modal-title" id="exampleModalLabel">添加书籍</h4>
                                </div>
                                <div class="modal-body add_book">
                                    <form>
                                        <div class="form-group author_name">
                                            <label for="recipient-name" class="control-label" lable="书名">书名</label>
                                            <input type="text" class="form-control" id="book_name">
                                        </div>

                                        <div class="form-group">
                                            <label for="recipient-name" class="control-label" lable="出版日期">出版日期</label>
                                            <input type="date" class="form-control" id="publish_date">
                                        </div>

                                        <div class="form-group">
                                            <label for="recipient-name" class="control-label" lable="价钱">价钱</label>
                                            <input type="text" class="form-control" id="book_price">
                                        </div>
                                        <div class="form-group">
                                            <label for="recipient-name" class="control-label" lable="出版社">出版社</label>
                                            {#                                            <input type="text" class="form-control" id="recipient-age" >#}
                                            <select name="book_pulish" id="book_pulish"
                                                    class="form-control select_publish">
                                            </select>

                                        </div>
                                        <div class="form-group">
                                            <label for="recipient-name" class="control-label" lable="作者">作者</label>
                                            <select name="author_publish" id="author_publish"
                                                    class="form-control select_author"
                                                    multiple>
                                            </select>
                                            <p style="color: red">按下ctrl进行多选</p>
                                        </div>

                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" id="book_add">保存</button>
                                </div>
                            </div>
                        </div>
                    </div><!-- /.modal -->
                </div>
            </div>
            <!-- 删除模态框（Modal） -->
            <div class="modal fade" id="identifier" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                        </div>
                        <div class="modal-body">
                            确定要删除么？
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消
                            </button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal" id="fix">
                                确定
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
            <!-- 编辑出版社模态框（Modal） -->
            <div class="modal fade" id="Modal_publish" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                请选择出版社
                            </h4>
                        </div>
                        <select name="edit-publish" id="Modal_publish_select" class="form-control ">

                        </select>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消
                            </button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal" id="publish_btn">
                                确定
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>

            <!-- 编辑作者模态框（Modal） -->
            <div class="modal fade" id="Modal_author" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                请选择作者
                            </h4>
                        </div>
                        <select name="edit_author" id="Modal_author_select" class="form-control " multiple>

                        </select>
                        <p style="color: red">按下ctrl进行多选</p>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消
                            </button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal" id="author_btn">
                                确定
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
            <!-- 提示框（Modal） -->
            <div class="modal fade" id="Modal_Prompt" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="alert alert-danger alert-dismissable">
                        <button data-dismiss="modal" type="button" class="close" data-dismiss="alert"
                                aria-hidden="true">
                            &times;
                        </button>
                        时间格式错误(y-m-d)
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
            <div class="col-md-8 outer col-md-offset-1  ">
                <table class="table table-bordered table-hover " id="table">
                </table>
                <nav aria-label="..." class="pull-right ">
                    <ul class="pagination page_ul">
                        <li class="previous_page previous_page1"><a href="#" aria-label="Previous"><span
                                aria-hidden="true">上一页</span></a>
                        </li>
                        <li class="active current_li" id="1"><a href="#">1 <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="next_page next_page1"><a href="#" aria-label="Next "><span
                                aria-hidden="true">下一页</span></a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <script>

            // 列出书籍，作者，出版社数据
            function see(current, this1) {
                if (current == "author") {
                    $.ajax({
                        url: "/index/",
                        type: "post",
                        data: {
                            csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                            choise: "author"
                        }, success: function (data) {
                            console.log(data)
                            $(".Jump").empty()
                            $(".page_ul").empty()

                            var pag = `        <li class="previous_page " current="author"><a href="#" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li>
        <li class="active current_li" id="1"><a href="#" >1 <span class="sr-only">(current)</span></a></li>
        <li class="next_page "><a href="#" aria-label="Next "><span aria-hidden="true">下一页</span></a></li>`
                            $(".page_ul").append(pag)


                            $(".table-bordered").empty()
                            var s = `
                       <thead>
                    <tr class="info ">
                        <th>序号</th>
                        <th>作者</th>
                        <th>年龄</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                        <tbody class="t_tbody Jump"></tbody>`

                            $(".table").append(s)
                            {#$(".col-md-9").prepend("<a href=\"#\" class='Jump add_author'>添加作者</a>")#}
                            $.each(data["author_obj"], function (i, d) {

                                var t = `
                    <tr class="active warning ">
                        <th scope="row">${i + 1}</th>
                        <td class="target_author">${d[0]}</td>
                        <td>${d[1]}</td>
                        <td>
                            <button type="button" class="btn btn-success" current_btn="e_author" current_id=${d[2]}>编辑</button>
                            <button type="button" class="btn btn-primary" current_btn="m_author" current_id=${d[2]}>保存</button>
                            <button type="button" class="btn btn-danger" current_btn="d_author" current_id=${d[2]}>删除</button>
                        </td>

                    </tr>
                    `
                                $(".t_tbody").append(t)

                            })
                            for (var i = 2; i < data["page_num"] + 1; i++) {
                                var s = `<li class="current_li" id="${i}"><a href=\"#\">${i}</a></li>`
                                $(".next_page").before(s)
                            }

                        }
                    })

                } else if (current == "publish") {
                    $.ajax({
                        url: "/index/",
                        type: "post",
                        data: {
                            csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                            choise: $(this1).attr("id"),
                            current_pag: $(this1).attr("id"),
                        }, success: function (data) {
                            console.log(data)
                            $(".Jump").empty()
                            $(".page_ul").empty()

                            var pag = `        <li class="previous_page" current="publish"><a href="#" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li>
        <li class="active current_li" id="1"><a href="#" >1 <span class="sr-only">(current)</span></a></li>
        <li class="next_page"><a href="#" aria-label="Next "><span aria-hidden="true">下一页</span></a></li>`
                            $(".page_ul").append(pag)


                            $(".table-bordered").empty()
                            var s = `
                       <thead>
                    <tr class="info ">
                        <th>序号</th>
                        <th>出版社名</th>
                        <th>城市</th>
                        <th>邮箱</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                        <tbody class="t_tbody Jump"></tbody>`

                            $(".table").append(s)
                            {#$(".col-md-9").prepend("<a href=\"#\" class='Jump add_author'>添加作者</a>")#}
                            $.each(data["publish_obj"], function (i, d) {
                                var t = `
                    <tr class="active warning ">
                        <th scope="row">${i + 1}</th>
                        <td class="target_publish">${d[0]}</td>
                        <td>${d[1]}</td>
                        <td>${d[2]}</td>
                        <td><button type="button" class="btn btn-success" current_btn="e_publish" current_id=${d[3]}>编辑</button>
  <button type="button" class="btn btn-primary" current_btn="m_author" current_id=${d[2]}>保存</button>
                            <button type="button" class="btn btn-danger" current_btn="d_publish" current_id=${d[3]}>删除</button>
                        </td>

                    </tr>
                    `
                                $(".t_tbody").append(t)

                            })
                            for (var i = 2; i < data["page_num"] + 1; i++) {
                                var s = `<li class="current_li" id="${i}"><a href=\"#\">${i}</a></li>`
                                $(".next_page").before(s)
                            }

                        }
                    })
                } else if (current == "books") {
                    $.ajax({
                        url: "/index/",
                        type: "post",
                        data: {
                            csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                            choise: $(this1).attr("id"),
                            current_pag: $(this1).attr("id"),
                        }, success: function (data) {
                            console.log(data)
                            $(".Jump").empty()
                            $(".page_ul").empty()

                            var pag = `        <li class="previous_page" current="books"><a href="#" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li>
        <li class="active current_li" id="1"><a href="#" >1 <span class="sr-only">(current)</span></a></li>
        <li class="next_page"><a href="#" aria-label="Next "><span aria-hidden="true">下一页</span></a></li>`
                            $(".page_ul").append(pag)


                            $(".table-bordered").empty()
                            var s = `
                       <thead>
                    <tr class="info ">
                        <th>序号</th>
                        <th>书籍名</th>
                        <th>出版时间</th>
                        <th>价钱</th>
                        <th>出版社</th>
                        <th>作者</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                        <tbody class="t_tbody Jump"></tbody>`

                            $(".table").append(s)
                            {#$(".col-md-9").prepend("<a href=\"#\" class='Jump add_author'>添加作者</a>")#}
                            $.each(data["book_obj"], function (i, d) {
                                var t = `
                    <tr class="active warning ">
                        <th scope="row">${i + 1}</th>
                        <td>${d[0]}</td>
                        <td>${d[1]}</td>
                        <td>${d[2]}</td>
                        <td>${d[3]}</td>
                        <td>${d[4]}</td>
                        <td><button type="button" class="btn btn-success" current_btn="e_books" current_id=${d[5]}>编辑</button>
  <button type="button" class="btn btn-primary" current_btn="m_author" current_id=${d[2]}>保存</button>
                            <button type="button" class="btn btn-danger" current_btn= "d_books" current_id=${d[5]}>删除</button>
                        </td>

                    </tr>
                    `
                                $(".t_tbody").append(t)

                            })
                            for (var i = 2; i < data["page_num"] + 1; i++) {
                                var s = `<li class="current_li" id="${i}"><a href=\"#\">${i}</a></li>`
                                $(".next_page").before(s)
                            }

                        }
                    })
                }

            }

            $(".panel_list").click(function () {
                var current = $(this).attr("id")
                see(current, this)
            })


            //分页
            function page(current, this1) {
                $(".Jump").empty()
                $(this1).siblings().removeClass("active")
                $(this1).addClass("active")
                if (current == "author") {
                    $.ajax({
                        url: "/index/",
                        type: "post",
                        data: {
                            csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                            current_pag: $(this1).attr("id"),
                            choise: "author",
                        },
                        success: function (data) {
                            console.log(data)
                            $.each(data["author_obj"], function (i, d) {
                                var t = `
                    <tr class="active warning ">
                        <th scope="row">${i + 1}</th>
                        <td class="target_author">${d[0]}</td>
                        <td>${d[1]}</td>
                        <td><button type="button" class="btn btn-success" current_btn= "e_author" current_id=${d[2]}>编辑</button>
  <button type="button" class="btn btn-primary" current_btn="m_author" current_id=${d[2]}>保存</button>
                            <button type="button" class="btn btn-danger" current_btn= "d_author" current_id=${d[2]}>删除</button>
                        </td>

                    </tr>
                    `
                                $(".t_tbody").append(t)

                            })

                        }
                    })
                } else if (current == "publish") {
                    $.ajax({
                        url: "/index/",
                        type: "post",
                        data: {
                            csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                            current_pag: $(this1).attr("id"),
                            choise: "publish",
                        },
                        success: function (data) {
                            console.log(data)
                            $.each(data["publish_obj"], function (i, d) {
                                var t = `
                    <tr class="active warning ">
                        <th scope="row">${i + 1}</th>
                        <td class="target_publish">${d[0]}</td>
                        <td>${d[1]}</td>
                        <td>${d[2]}</td>
                        <td><button type="button" class="btn btn-success" current_btn= "e_publish" current_id=${d[3]}>编辑</button>
  <button type="button" class="btn btn-primary" current_btn="m_author" current_id=${d[2]}>保存</button>
                            <button type="button" class="btn btn-danger" current_btn= "d_publish" current_id=${d[3]}>删除</button>
                        </td>

                    </tr>
                    `
                                $(".t_tbody").append(t)

                            })

                        }
                    })


                } else if (current == "books") {
                    $.ajax({
                        url: "/index/",
                        type: "post",
                        data: {
                            csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                            current_pag: $(this1).attr("id"),
                            choise: "books",
                        },
                        success: function (data) {
                            console.log(data)
                            $.each(data["book_obj"], function (i, d) {
                                var t = `
                    <tr class="active warning ">
                        <th scope="row">${i + 1}</th>
                        <td>${d[0]}</td>
                        <td>${d[1]}</td>
                        <td>${d[2]}</td>
                        <td>${d[3]}</td>
                        <td>${d[4]}</td>
                        <td><button type="button" class="btn btn-success" current_btn= "e_books" current_id=${d[5]}>编辑</button>
  <button type="button" class="btn btn-primary" current_btn="m_author" current_id=${d[2]}>保存</button>
                            <button type="button" class="btn btn-danger" current_btn= "d_books" current_id=${d[5]}>删除</button>
                        </td>

                    </tr>
                    `
                                $(".t_tbody").append(t)

                            })

                        }
                    })
                }
            }

            $(".page_ul").on("click", ".current_li", function () {
                var current = $($(".page_ul").children("li").get(0)).attr("current")
                page(current, this)

            })

            //上一页
            $(".page_ul").on("click", ".next_page", function () {
                $(".page_ul .active").next().trigger("click")
            })

            //下一页
            $(".page_ul").on("click", ".previous_page", function () {
                $(".page_ul .active").prev().trigger("click")
            })


            //添加作者
            $(".modal-footer #author_add").click(function () {
                $.ajax({
                    url: "/author_add/",
                    type: "post",
                    data: {
                        csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                        author: $("#recipient-name").val(),
                        age: $("#recipient-age").val()
                    },
                    success: function (data) {
                        console.log(data)
                        if (data['is_author']) {

                            $("#recipient-name").after("<p style='color: red' class='u_error'>用户名已存在</p>")
                        } else if (data['is_author'] === null) {
                            $("#recipient-name").after("<p class='u_error' style='color: red' >用户名或密码输入为空</p>")
                        } else {
                            $("#recipient-name").val("")
                            $("#recipient-age").val("")
                            $("#author_add").attr("data-dismiss", "modal").trigger("click").removeAttr("data-dismiss")
                            {#$("#author_add").removeAttr("data-dismiss")#}
                            $(".author_list").trigger("click")


                        }
                        setTimeout(function () {
                            $("#recipient-name").next().remove()
                        }, 1000)


                    }
                })

            })


            // 添加出版社
            $(".modal-footer #publish_add").click(function () {
                //判断输入是否为空
                $.ajax({
                    url: "/publish_add/",
                    type: "post",
                    data: {
                        csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                        publish_name: $("#publish_name").val(),
                        city_name: $("#city_name").val(),
                        email_name: $("#email_name").val()
                    },
                    success: function (data) {
                        console.log(data)

                        if (data['is_publish']) {

                            $("#recipient-name").after("<p style='color: red' class='u_error'>出版社已经存在</p>")
                        } else if (data['is_null']) {
                            $(".publish_form .form-group input").each(function () {


                                if (!$(this).val()) {
                                    var lable = $(this).attr("lable")
                                    var s = `<p style='color: red' class='error'>${lable}不能为空值</p>`
                                    $(this).after(s)

                                }
                                setTimeout(function () {
                                    $(".publish_form .form-group p").remove()

                                }, 1000)


                            })
                        } else {
                            $("#publish_name").val("")
                            $("#city_name").val("")
                            $("#email_name").val("")
                            $("#publish_add").attr("data-dismiss", "modal").trigger("click").removeAttr("data-dismiss")
                            {#$("#author_add").removeAttr("data-dismiss")#}
                            $("#publish").trigger("click")

                        }
                        setTimeout(function () {
                            $(".publish_form .form-group p").remove()
                        }, 1000)


                    }
                })

            })


            //添加书籍
            $("#book_add").click(function () {
                $.ajax({
                    url: '/book_add/',
                    type: 'post',
                    data: {
                        csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                        book_name: $("#book_name").val(),
                        publish_date: $("#publish_date").val(),
                        book_price: $("#book_price").val(),
                        pulish_id: $("#book_pulish").val(),
                        {#author_id: $("#author_publish").val().serialize()#}
                        {#$.param({'Rooms' : rooms},true);#}
                        author_id: $.param({'author_id': $("#author_publish").val()}, true)
                    },

                    success: function (data) {
                        console.log(data)
                        if (data["is_null"]) {
                            $(".add_book .form-group input").each(function () {
                                if (!$(this).val()) {
                                    var name = $(this).prev().attr("lable")
                                    console.log(name)
                                    var s = `<p style="color: red" class="p">${name}不能为空</p>`
                                    $(this).after(s)
                                }
                                setTimeout(function () {
                                    $(".add_book .form-group .p").remove()

                                }, 1000)
                            })
                        } else if (data["is_books"]) {
                            var s = `<p style="color: red" class="p">用户名已存在</p>`
                            $("#book_name").after(s)
                            setTimeout(function () {
                                $(".add_book .form-group .p").remove()

                            }, 1000)
                        } else {
                            $("#book_name").val("")
                            $("#publish_date").val("")
                            $("#book_price").val("")
                            $("#book_pulish").val("")
                            $("#author_publish").val("")
                            $("#book_add").attr("data-dismiss", "modal").trigger("click").removeAttr("data-dismiss")
                            {#$("#author_add").removeAttr("data-dismiss")#}
                            $("#books").trigger("click")
                        }

                    }

                })
            })


            //查询书籍和出版社赋值给select选项框
            $(".s_books").click(function () {
                $.ajax({
                    url: '/s_books/',
                    type: 'post',
                    data: {
                        csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                    },
                    success: function (data) {
                        console.log(data)
                        $(".select_author").empty()
                        $(".select_publish").empty()

                        $.each(data["publish"], function (i, d) {
                            var s = `<option value="${d[0]}" id="${d[0]}">${d[1]}</option>`
                            $(".select_publish").append(s)

                        })
                        $.each(data["author"], function (i, d) {
                            var s = `<option value="${d[0]}" id="${d[0]}">${d[1]}</option>`
                            $(".select_author").append(s)
                        })
                        if (data["publish"].length == 0) {

                            var s = `<option style="color: red" value="" id="">请先添加出版社</option>`
                            $(".select_publish").append(s)
                            return false
                        }
                        if (data["author"].length == 0) {
                            var s = `<option style="color: red" value="" id="">请先添加作者</option>`
                            $(".select_author").append(s)
                            return false
                        }


                    }

                })
            })


            //删除数据
            $("#table").on("click", "tbody td .btn-danger", function () {
                current_btn_1 = $(this).attr("current_btn")
                current_id_1 = $(this).attr("current_id")
                $('#identifier').modal('show')
                $('#fix').click(function (event) {
                    $.ajax({
                        url: '/delete/',
                        type: "post",
                        data: {
                            csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                            current_btn: current_btn_1,
                            current_id: current_id_1,
                        },
                        success: function (data) {
                            if (data["current_l"] == "d_author") {
                                $("#author").trigger("click")
                            } else if (data["current_l"] == "d_publish") {
                                $("#publish").trigger("click")
                            } else if (data["current_l"] == "d_books") {
                                $("#books").trigger("click")
                            }

                        }
                    })
                })
            })

            // 编辑数据
            $("#table").on("click", "tbody td .btn-success", function () {


                //恢复原有标签
                $("#table td input").parent().each(function () {
                    var val = $(this).children().val()
                    var s = `<td>${val}</td>`
                    $(this).replaceWith(s)
                })


                //替换标签
                $($(this).parent().siblings()).each(function (index) {
                    if (index > 0) {
                        var val = $(this).html()
                        var s = `<td><input type="text" id="" class="" value="${val}"></td>`
                        $(this).replaceWith(s)
                    }
                })

                // 编辑数据
                if ($(this).attr("current_btn") == "e_books") {
                    // publish_select表单渲染
                    current_publish_edit = $(this).parent().prev().prev()
                    $(this).parent().prev().prev().click(function () {
                        $("#Modal_publish_select").empty()
                        $('#Modal_publish').modal('show')
                        $.ajax({
                            url: "/s_books/",
                            type: "post",
                            data: {
                                csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                            },
                            success: function (data) {
                                $.each(data["publish"], function (i, d) {
                                    var s = `<option value="${d[1]}" id="${d[0]}">${i + 1},${d[1]}</option>`
                                    $("#Modal_publish_select").append(s)

                                })
                                $("#publish_btn").unbind("click").click(function () {
                                    {#alert('123')#}
                                    var val = $("#Modal_publish_select").val()
                                    $($(current_publish_edit).children().get(0)).val(val)
                                })
                            }

                        })

                    })
                    // author_select表单渲染
                    $(this).parent().prev().click(function () {
                        current_author_edit = $(this).children().get(0)
                        $("#Modal_author_select").empty()
                        $('#Modal_author').modal('show')
                        $.ajax({
                            url: "/s_books/",
                            type: "post",
                            data: {
                                csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                            },
                            success: function (data) {
                                $.each(data["author"], function (i, d) {
                                    var s = `<option value="${d[1]}" id="${d[0]}">${i + 1},${d[1]}</option>`
                                    $("#Modal_author_select").append(s)
                                    $("#author_btn").unbind("click").click(function () {
                                        var val = $("#Modal_author_select").val().toString()
                                        $(current_author_edit).val(val)

                                    })
                                })

                            }

                        })

                    })
                    $(this).next().unbind("click").click(function () {
                        $.ajax({
                            url: "/edit/",
                            type: "post",
                            data: {
                                csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                                edit_type: "books",
                                current_id: $(this).prev().attr("current_id"),
                                author: $($(this).parent().prev().children().get(0)).val(),
                                publish: $($(this).parent().prev().prev().children().get(0)).val(),
                                price: $($(this).parent().prev().prev().prev().children().get(0)).val(),
                                publish_date: $($(this).parent().prev().prev().prev().prev().children().get(0)).val(),
                                book_title: $($(this).parent().prev().prev().prev().prev().prev().children().get(0)).val(),
                            },
                            success: function (data) {
                                if (data["status"] == "ValidationError") {
                                    $("#Modal_Prompt").modal("show")
                                }
                                $(".active").trigger("click")

                            }
                        })

                        $(this).unbind('click')
                    })
                } else if ($(this).attr("current_btn") == "e_author") {
                    $(this).next().click(function () {
                        $.ajax({
                                url: "/edit/",
                                type: "post",
                                data: {
                                    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                                    edit_type: "author",
                                    current_id: $(this).prev().attr("current_id"),
                                    author_age: $($(this).parent().prev().children().get(0)).val(),
                                    author_name: $($(this).parent().prev().prev().children().get(0)).val(),
                                },
                                success: function () {
                                    $(".active").trigger("click")
                                }
                            }
                        )


                        $(this).unbind("click")
                    })
                } else if ($(this).attr("current_btn") == "e_publish") {
                    $(this).next().click(function () {

                        $.ajax({
                            url: "/edit/",
                            type: "post",
                            data: {
                                csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                                edit_type: "publish",
                                current_id: $(this).prev().attr("current_id"),
                                publish_email: $($(this).parent().prev().children().get(0)).val(),
                                publish_city: $($(this).parent().prev().prev().children().get(0)).val(),
                                publish_name: $($(this).parent().prev().prev().prev().children().get(0)).val(),

                            }, success: function () {
                                $(".active").trigger("click")
                            }
                        })

                        $(this).unbind("click")
                    })
                }


            })


            $("#table").on("mouseenter", "tbody .target_author", function () {
                $(this).css({'background-color': '#EEE9BF', "cursor": "pointer"});
            })
            $("#table").on("mouseout", "tbody .target_author", function () {
                $(this).css({'background-color': ''});
            })
            $("#table").on("click", "tbody .target_author", function () {
                var current_author = $(this).html()
                console.log(current_author)
                window.open("/select/author/" + current_author);
            })


            $("#table").on("mouseenter", "tbody .target_publish", function () {
                $(this).css({'background-color': '#EEE9BF', "cursor": "pointer"});
            })
            $("#table").on("mouseout", "tbody .target_publish", function () {
                $(this).css({'background-color': ''});
            })
            $("#table").on("click", "tbody .target_publish", function () {
                var current_author = $(this).html()
                console.log(current_author)
                window.open("/select/publish/" + current_author);
            })




            //默认加载事件
            window.onload = function () {
                $("#books").trigger("click")
            }
        </script>
    </div>

{% endblock %}